<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>积极分子成绩查询系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入样式 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.0/theme-chalk/index.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.0/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
</head>
<style>
    @media screen and (max-width: 750px) {
        .el-message-box {
            width: 60% !important;
        }
    }
</style>
<body style="background-color: #5c0001;">
    <div id="content" style="background-color: #5C0001;">
        <div>
            <img src="img/bg.png" style="width: 100%" />
        </div>
        <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
            <el-card class="box-card" style="width: 90%;margin-top: 20px;">
                <div style="display: flex;flex-direction: column;justify-content: center;align-items: flex-start;">
                    <span style="margin: 10px;">姓名:</span>
                    <el-input v-model="form.name" autocomplete="off" placeholder="请输入姓名" ></el-input>
                </div>
                <div style="display: flex;flex-direction: column;justify-content: center;align-items: flex-start;">
                    <span style="margin: 10px;">班级:</span>
                    <el-input v-model="form._class" autocomplete="off" placeholder="请输入班级"></el-input>

                </div>
                <div v-if="grade_show" style="display: flex;flex-direction: row;justify-content: center;margin: 10px;">
                    <span :style="{ color: activeColor}" style="font-size: 40px;line-height: 1;">{{stu.grade}}</span><span style="    display: flex;flex-direction: column;justify-content: flex-end;">分</span>
                </div>
                <div v-if="grade_show" style="display: flex;flex-direction: row;justify-content: center;margin: 10px;font-size: 14px;">
                    <p>{{tips}}</p>
                </div>
                <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
                    <el-button @click="getData" type="danger" icon="el-icon-search" circle style="margin: 10px;"></el-button>
                </div>
            </el-card>
            <div style="color:white;">
                <p>power by xiaoxi</p>
            </div>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: '#content',
            data: {
                form:{
                    name:"",
                    _class:""
                },
                stu: {grade:""},
                grade_show:false,
                tips:"",
                activeColor:''
            },
            mounted:function(){

            },
            methods:{
                getData:function(){
                    axios.get('getStudentPositive',{
                        params: {
                            name:app.form.name,
                            _class:app.form._class
                        }
                    })
                        .then(res => {
                            console.log('数据是:', res);
                            app.stu=res.data.data;
                            if(res.data.data==null){
                                this.$alert('没找到相关信息，可能是您的班级填写错误，请仔细检查，18级17级格式是XX级专业名称本科X班，19级是X级专业名称X班。', '查询为空', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                    }
                                });
                            }else{
                                app.grade_show=true;
                                if(app.stu.grade == "缺考"){
                                    app.tips="";
                                    app.activeColor='red';
                                }
                                if(parseInt(app.stu.grade) >=60){
                                    app.tips="恭喜你！考核通过！希望你能够一直保持初心！";
                                    app.activeColor="lightgreen";
                                }
                                if(parseInt(app.stu.grade) <60){
                                    app.tips="/(ㄒoㄒ)/~~ 还得继续加油哦！";
                                    app.activeColor="red";
                                }
                            }

                        })
                        .catch((e) => {
                            console.log('获取数据失败');
                        });
                },
                goto:function(item){
                    window.open('upload.html?id='+item.id);
                },
            }
        })
    </script>
</body>
</html>